<template>
  <div id="table-selector">
    <table>
      <tbody>
        <tr height="12" v-for="n in rowNum" :key="n" class="table-row">
          <td 
            width="15" 
            v-for="m in columnNum" 
            :key="m" 
            :class="{'table-column': true, 'grid-hover': (n <= currentMouse.rowIndex && m <= currentMouse.columnIndex)}"
            @mousemove="handleMouseMove(n,m)"
            @click="handleMouseDown(n,m)"
          ></td>
        </tr>
      </tbody>
    </table>
    <span style="margin-top: 10px">{{`${currentMouse.rowIndex} &times; ${currentMouse.columnIndex}`}}</span>
  </div>
</template>

<script>
export default {
  name: 'TableSelect',
  props:['visible'],
  data() {
    return {
      rowNum: 4,
      columnNum:4,
      currentMouse: {
        rowIndex: 0,
        columnIndex: 0
      }
    }
  },
  watch: {
    visible: function(val) {
      if(val) {
        this.initData()
      }
    }
  },
  methods:{
    handleMouseMove(rowIndex, columnIndex) {
      this.currentMouse = {
        rowIndex,
        columnIndex
      }
      if(rowIndex < this.rowNum && this.rowNum > 4) {
        this.rowNum -= 1
      }
      if(columnIndex < this.columnNum && this.columnNum > 4) {
        this.columnNum -= 1
      }
      if(rowIndex === this.rowNum && this.rowNum < 10) {
        this.rowNum += 1
      }
      if(columnIndex === this.columnNum && this.columnNum < 10) {
        this.columnNum += 1
      }
    },

    handleMouseDown(rowIndex, columnIndex) {
      console.log('rowIndex', rowIndex)
      this.$emit('clicked', {rowNum: rowIndex, columnNum:columnIndex})
      // this.initData()
    },

    initData() {
      this.rowNum = 4;
      this.columnNum = 4;
      this.currentMouse = {
        rowIndex: 0,
        columnIndex: 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
  #table-selector {
    table {
      .table-row {
        .table-column {
          cursor: pointer;
          border: 1px solid #aaa;
        }
        .grid-hover {
          background-color: #EEFDED;
        }
      }
    }
    
  }
</style>